<%@ include file="/WEB-INF/jsp/includes/doctype.jsp"%>
<%@ include file="/WEB-INF/jsp/includes/stdtags.jsp"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<div class="video-carousel-overlay">
   <div class="carousel-video-wrapper">
      <div class="carousel-video-content"></div>
   </div>
</div>
<div data-interval="4000" data-control="true" data-indicator="true" data-theme="light" class="carousel fade fluid theme-dark">
   <ul class="carousel-inner">
      <li class="placeholder" style="visibility: hidden;">
         <div class="carousel-bg">
            <img width="1536" height="300" class="carousel-item-bg" src="images/products/mobile/carousel/fullcarousel-placeholder.png">
         </div>
      </li>
      <c:forEach var="productCarousel" items="${productCarousels}">
		<li data-theme="dark" class="theme-dark item">
			<div class="carousel-bg">
		<c:choose>
			<c:when test="${isAdmin}">
				<a class="link-wrap" onclick="starhub.mobile.editProductCarousel(${productCarousel.id})" >
			</c:when>
			<c:otherwise>
				<a class="link-wrap" href="${productCarousel.link}">
			</c:otherwise>
		</c:choose>
					<img width="1536" height="300" class="carousel-item-bg" alt="" src="${productCarousel.backgroundImage}">
				</a>
			</div>
		</li>
      </c:forEach>
   </ul>
   <ul class="carousel-contents" style="display: block;">
   	<c:forEach var="productCarousel" items="${productCarousels}">
		<li data-theme="dark" class="theme-dark">
		<c:choose>
			<c:when test="${isAdmin}">
				<a class="promo-item" onclick="starhub.mobile.editProductCarousel(${productCarousel.id})" >
			</c:when>
			<c:otherwise>
				<a href="${productCarousel.link}" class="promo-item">
			</c:otherwise>
		</c:choose>
		
			
				<h2>${productCarousel.bannerTitle}</h2>
				<p>${productCarousel.bannerText}</p>
				<a>
					<div title="Find Out More" class="btn-rarrow theme-light-green"><span class="icon"></span>Find Out More</div>
				</a>
			</a>
		</li>
   	</c:forEach>
   </ul>
   <ol class="carousel-indicators">
   		<c:forEach var="productCarousel" items="${productCarousels}" varStatus="index">
   			<li data-slide-to="${index}" class=""></li>
   		</c:forEach>
   </ol>
   <a data-slide="prev" href="#myCarousel" class="carousel-control left">&nbsp;</a>
   <a data-slide="next" href="#myCarousel" class="carousel-control right">&nbsp;</a>
</div>